<template>
    <!-- components: columnList -->
    <div class = "column-content row">
        <div
          class = "col-4 mb-4"
          v-for = "column in columnList"
          :key ="column._id"
        >
          <div class = "card h-100 shadow-sm">
            <div class = "card-body text-center">
              <img
                class = "rounded-circle border border-light my-3"
                v-bind:src ="column.avatar && column.avatar.url"
                v-bind:alt ="column.title"
              >
              <h5 class = "card-title">{{column.title}}</h5>
              <p class = "card-text text-left">{{column.description}}</p>
              <!-- v-bind:to="`/column/${column._id}`" -->
              <!-- v-bind:to="{name: 'column', params: {id: column._id}}" -->
              <router-link
                class="btn btn-outline-primary"
                v-bind:to="`/column${column._id}`"
              >进入专栏</router-link>
            </div>
          </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, PropType, computed } from 'vue'
// 导入 helper
import { addColumnAvatar } from '@/assets/js/helper'
// 导入 数据
import { ColumnProps } from '@/assets/js/store'

// 对setup函数进行封装，返回options的对象
export default defineComponent({
  // 页面名称
  name: 'ColumnList',
  // 传递数据
  props: {
    // 专栏数据
    list: {
      type: Array as PropType<ColumnProps[]>,
      required: true
    }
  },

  // 组合式api入口
  setup (props) {
    const columnList = computed(() => {
      // 不存在缩略图时
      return props.list.map(column => {
        addColumnAvatar(column, 50, 50)
        return column
      })
    })
    return {
      columnList
    }
  }
})
</script>

<style lang = "css" scoped>
.column-content{
  width: auto;
  max-width: 1000px;
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
}
.card-body img {
  width: 50px;
  height: 50px;
}
</style>
